<!-- 用户资料更新界面： 绑定设置 -->
<template>
  <div id="privacy">
    <el-divider content-position="left">私信<span class="fn-cl">接收新私信提醒</span></el-divider>
    <ul>
      <li v-for="(item, index) of msgRadioText" :key="index">
        <el-radio v-model="msgRadio" :label="item.label">{{ item.text }}</el-radio>
      </li>
    </ul>

    <el-divider content-position="left">通知</el-divider>
    <el-checkbox-group v-model="checkedList">
      <el-checkbox v-for="(option, index) in options" :label="option" :key="index"></el-checkbox>
    </el-checkbox-group>

    <el-divider content-position="left">听歌排行</el-divider>
    <ul>
      <li v-for="(item, index) of rankRadioText" :key="index">
        <el-radio v-model="rankRadio" :label="item.label">{{ item.text }}</el-radio>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  name: "UpdatePrivacy",

  beforeMount() {
    // 初始化用户对象
    this.user = this.$cookies.get('user');

    // 初始化私信提醒设置
    this.msgRadio = this.user.privacyMsg;
    // 初始化通知提醒设置
    this.checkedList = this.user.privacyNotice;
    // 初始化听歌排行设置
    this.rankRadio = this.user.privacyMusicRank;
  },

  beforeDestroy() {
    // 私信提醒设置
    this.user.privacyMsg = this.msgRadio;
    // 通知提醒设置
    this.user.privacyNotice = this.checkedList;
    // 听歌排行设置
    this.user.privacyMusicRank = this.rankRadio;

    this.$cookies.set('user', this.user);
  },

  data () {
    return {
      // 用户对象
      user: null,

      // 私信按钮组
      msgRadioText: [
        { label: 0, text: '所有人' },
        { label: 1, text: '我关注的人' },
      ],
      msgRadio: 0,

      checkedList: [
        '歌单被收藏', '视屏被收藏', '电台被订阅', '收到赞', '新粉丝'
      ],
      options: [
          '歌单被收藏', '视屏被收藏', '电台被订阅', '收到赞', '新粉丝'
      ],

      // 听歌排行按钮组
      rankRadioText: [
        { label: 0, text: '所有人可见' },
        { label: 1, text: '仅自己可见' },
      ],
      rankRadio: 0,
    }
  },
}
</script>

<style lang="less" scoped>
@import "../public/less/update_privacy";
</style>